<!-- <SelectAll @change="selectAllChange"></SelectAll> -->

<template>
	<div>
		<el-select
			multiple
			clearable
			filterable
			collapse-tags
			v-model="value"
			placeholder="请选择"
			@change="changeSelect"
		>
			<el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
			<el-option
				v-for="(item, index) in options"
				:key="item.id || index"
				:label="item[labelKey]"
				:value="item[valueKey]"
			></el-option>
		</el-select>
	</div>
</template>
<script>
export default {
	props: {
		options: {
			type: Array,
			default: [
				{ name: '一一', label: 'one' },
				{ name: '二二', label: 'tow' },
				{ name: '三三', label: 'three' },
				{ name: '四四', label: 'four' },
				{ name: '五五', label: 'five' },
			],
		},
		value: {
			type: Array,
			default: [],
		},
		valueKey: {
			typeof: String,
			default: 'name',
		},
		labelKey: {
			typeof: String,
			default: 'label',
		},
	},
	data() {
		return {
			checked: false,
			value: [],
		}
	},
	created() {
		console.log(
			`this.valueKey,this.labelKey`,
			this.valueKey,
			this.labelKey,
			this.options
		)
	},
	methods: {
		selectAll() {
			this.value = []
			if (this.checked) {
				this.options.map((item) => {
					this.value.push(item[this.valueKey])
				})
			} else {
				this.value = []
			}
			this.$emit('change', this.value)
			this.$emit('input', this.value)
		},
		changeSelect(val) {
			if (val.length === this.options.length) {
				this.checked = true
			} else {
				this.checked = false
			}
			this.$emit('change', val)
			this.$emit('input', this.value)
		},
	},
}
</script>
<style lang="scss" scoped>


.el-checkbox {
	text-align: right;
	width: 100%;
	padding-right: 10px;
}
</style>
